<template>
	<view class="container">
		<image class="cover" :src="data.cover" />
		<view class="title">
			成功提交到幼儿园! 
		</view>
		<view class="desc">
			缴费完成后，老师会打印并递交到您手中
		</view>
		<x-button class="btn" title="马上缴费" @click="payClick"></x-button>
	</view>
</template>

<script>
	// #ifdef H5
	const jweixin = require('jweixin-module')
	// #endif
	import {
		mapState
	} from 'vuex';
	import XButton from '@/components/x-button.vue'
	import { getWxPrepare, getWxConfig, wxOrderCheck } from '@/api/pay.js' 
	export default {
		components: {
			XButton
		},
		data() {
			return {
				data: {},
			}
		},
		computed: {
			...mapState({
				parentInfo: state => state.user.parentInfo,
			}),
		},
		onLoad(options) {
			this.data = options
			// #ifdef H5
				jweixin.ready(function () {
					console.log('ready');
					this.wxReady = true;
				})
				this.initWxConfig();
			// #endif
		},
		onUnload() {
			this.cancelInterval()
		},
		methods: {
			payClick() {
				console.log(this.parentInfo);
				// #ifdef APP
					const params = {
						resourceType: 2,
						'resourceId': this.data.id,
					}
				// #endif
				// #ifdef H5
					const params = {
						resourceType: 2,
						'resourceId': this.data.id,
						'openId': this.parentInfo.openidWp
					}
				// #endif
				uni.showLoading({})
				getWxPrepare(params).then(res => {
					console.log(res);
					// #ifdef APP
						this.appPay(res.data.wxPayResult);
					// #endif
					// #ifdef H5
						this.h5Pay(res.data);
					// #endif
				}).finally(e => {
					uni.hideLoading()
				})
			},
			h5Pay(res) {
				this.cancelInterval();
				this.timer = setInterval(() => {
					this.orderCheck(res.outTradeNo)
				}, 1000 * 2);
				this.chooseWXPay(res.wxPayResult)
			},
			cancelInterval() {
				if (!this.$u.test.isEmpty(this.timer)) {
					clearInterval(this.timer)
					this.timer = null
				}
			},
			chooseWXPay(wxPayResult) {
				const that = this;
				uni.showLoading()
				jweixin.chooseWXPay({
					timestamp: wxPayResult.timeStamp,
					nonceStr: wxPayResult.nonceStr,
					package: wxPayResult.packageValue,
					signType: wxPayResult.signType,
					paySign: wxPayResult.paySign,
					// success: function (res) {
					// 	// 支付成功后的回调函数
					// 	console.log(res);
					// 	this.$u.toast('支付成功');
					// 	uni.$emit('paySuccess',{});
					// 	uni.navigateBack({})
					// },
					// fail:function(r){
					// 	this.$u.toast(r);
					// },
					success: function(res) {
						// 支付成功后的回调函数
						// alert("支付成功4:");
					},
					error: function() {
						// alert("支付失败3");
						that.cancelInterval()
						uni.hideLoading()
					},
					cancel: function() {
						that.cancelInterval()
						uni.hideLoading()
					},
					complete: function() {
						// alert("支付完成1");
					},
				});
			},
			appPay(res) {
				const orderInfo = {
					appid: res.appId,
					noncestr: res.nonceStr,
					package: res.packageValue,
					partnerid: res.partnerId,
					prepayid: res.prepayId,
					timestamp: res.timeStamp,
					sign: res.sign,
				}
				console.log(orderInfo);
				uni.showLoading()
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo: orderInfo,
					success: res => {
						uni.hideLoading()
						// console.log('success:' + JSON.stringify(res));
						this.$u.toast('支付成功');
						setTimeout(function() {
							uni.$emit('paySuccess',{});
							uni.navigateBack({})
						}, 1000);
					},
					fail: err => {
						uni.hideLoading()
						console.log('fail:' + JSON.stringify(err));
						this.$u.toast(err);
					}
				});
			},
			
			initWxConfig() {
				getWxConfig(window.location.href).then(res => {
					console.log(res);
					if (res.code === '000000') {
						jweixin.config({
							debug: false,
							appId: res.data.appId,
							timestamp: res.data.timestamp,
							nonceStr: res.data.nonceStr,
							signature: res.data.signature,
							jsApiList: [
								'chooseWXPay',
							]
						})
					} else {
						this.$u.toast('微信支付参数获取失败:' + res.message);
					}
				})
			},
			orderCheck(outTradeNo) {
				wxOrderCheck(outTradeNo).then(res => {
					this.$u.toast('支付成功');
					setTimeout(function() {
						uni.$emit('paySuccess',{});
						uni.navigateBack({})
					}, 1000);
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;

		.cover {
			margin-top: 90rpx;
			width: 375rpx;
			height: 667rpx;
		}
		
		.title{
			margin-top: 30rpx;
		}
		.desc{
			margin-top: 20rpx;
			color: #28a069;
		}

		.btn {
			margin-top: 40rpx;
		}
	}
</style>
